<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			.container{
				width: 1226px;
				height: 460px;
				margin: auto;
				margin-top: 100px;
				position: relative;
							
			}
			.container .showImage li{
				list-style: none;
				width: 1226px;
				height: 460px;
				position: absolute;
				left: 0px;
				top: 0px;
				opacity: 0;
			}
			.container .showImage li img{
				width: 100%;
				height: 100%;
			}
			.container .showImage li.active{
				opacity: 1;
				z-index: 100;
			}
			.container .control{
				font-size: 40px;
				display: block;
				padding: 10px;
				color: gray;
				position: absolute;
				z-index: 120;
				cursor: pointer;
				top:200px;
				border-radius: 4px;
				
			}
			a.left{
				left: 0px;
			}
			a.right{
				right: 0px;
			}
			.container .control:hover{
				color: white;
				background-color: darkgray;
			}
			.container .icon{
				position: absolute;
				z-index: 120;
				bottom: 25px;
				left: 550px;
			}
			.container .icon li{
				list-style: none;
				width: 10px;
				height: 10px;
				background-color: gray;
				border: 2px solid darkgray;
				border-radius: 50%;
				float: left;
				margin-left: 3px;
				cursor: pointer;
				
			}
			.container .icon li.active{
				background-color: white;
			}
		</style>
		<script type="text/javascript" src="js/jquery-3.3.1.min.js" ></script>
		<script type="text/javascript">
			//创建一个全局变量表示迭代器对象
			 var myInter;
				 $(function(){
				 	$("a.right").bind("click",nextImage);
				 	$("a.left").bind("click",prevImage);
				 	//获取li绑定鼠标单击事件
				 	$("ul.icon li").bind("click",updateImage);
				 	myInter=setInterval("nextImage()",3000);
				 });
				 
				 //创建一个函数进行下一张的切换
				 function nextImage(){
				 	//找到现在是哪一个在显示
				 	var obj=$(".showImage").find("li.active").animate({"opacity":0},800).removeClass("active");
				 	//查询当前元素的下一个元素
				 	var nt= $(obj).next("li");
				 	//利用if	语句判断  是否是最后一个li
				 	if($(nt).length>0){
				 		$(nt).animate({"opacity":1},800).addClass("active");
				 	}else{
				 		$(".showImage").find("li:first").animate({"opacity":1},800).addClass("active");
				 	}
				 	//active已经添加到指定图片的li上
				 	updateIcno();
				 	
				 }
				 
				  //创建一个函数进行上一张的切换
				 function prevImage(){
				 	//找到现在是哪一个在显示
				 	var obj=$(".showImage").find("li.active").animate({"opacity":0},800).removeClass("active");
				 	//查询当前元素的上一个元素		
				 	var nt= $(obj).prev("li");
				 	//利用if	语句判断  是否是最后一个li
				 	if($(nt).length>0){
				 		$(nt).animate({"opacity":1},800).addClass("active");
				 	}else{
				 		$(".showImage").find("li:last").animate({"opacity":1},800).addClass("active");
				 	}
				 	//active已经添加到指定图片的li上
				 	updateIcno();
				 }
				 
				 //图片切换，点切换
				 function updateIcno(){
				 	
				 	//清除迭代器效果
				 	clearInterval(myInter);
				 	var n=$(".showImage").find("li.active").index();
				 	//切换点的样式
				 	$(".icon").find("li").eq(n).addClass("active").siblings(".active").removeClass("active");
				 	myInter=setInterval("nextImage()",3000);
				 }
				 
				 //创建切换图片的函数
				 function updateImage(){
				 	//找到将要切换的li让其透明度变为1 添加class属性
				 	//找到除了自己以外的其他同胞元素中带有active的那个元素   透明度变为0 移除class属性
				 	$(".showImage").find("li").eq($(this).index()).animate({"opacity":1},800).addClass("active")
				 	.siblings(".active").animate({"opacity":0},800).removeClass("active");
				 	
				 	//让点变颜色
				 	//让当前的li添加class属性，找到自己以外其他同胞元素中带有active的那个元素进行class移除
				 	$(this).addClass("active").siblings(".active").removeClass("active");
				 }
		</script>
	</head>
	<body>
		<div class="container">
			<ul class="showImage">
				<li class="active"><a href="#1"><img src="img/mi8.jpg"></a></li>
				<li><a href="#2"><img src="img/小米笔记本.jpg"></a></li>
				<li><a href="#3"><img src="img/年货节.jpg"></a></li>
				<li><a href="#4"><img src="img/mi8.jpg"></a></li>
				<li><a href="#5"><img src="img/小米笔记本.jpg"></a></li>
			</ul>
			<a class="control left">&lt;</a>
			<a class="control right">&gt;</a>
			
			<ul class="icon">
				<li class="active"></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
			</ul>
		</div>
	</body>
</html>
